<template>
  <el-row class="row-bg" justify="space-between">
    <el-col
      :span="6"
      style="display: flex; cursor: pointer; align-items: center"
    >
    <el-icon @click="changeMenu" size="30" v-show="flag" color="white"><Fold /></el-icon>
    <el-icon @click="changeMenu" size="30"  v-show="isflag" color="white"><Expand /></el-icon>
    </el-col>
    <el-col :span="6" style="color:aqua">南京立登尔口腔文档管理系统2.0</el-col>
    <el-col :span="6">
      <img :src="headimgurl" alt="" width="30" height="30" style="margin-right:5px;">
      {{nickname}}
      
    <!-- <span class="el-dropdown-link" > -->
      
    <!-- </span> -->
        <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <el-icon  class="el-icon--right"><caret-bottom/></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu style="background: linear-gradient(to right, #414345, #232526);">
        <el-dropdown-item command="a">
            <svg class="icon" aria-hidden="true" style="margin-right:5px">
               <use xlink:href="#icon-liebiaoye-VIPjiaobiao"></use>
            </svg>     
          vip到期时间</el-dropdown-item>
        <el-dropdown-item command="b" style="border-top:2px solid white;">
          <svg class="icon" aria-hidden="true" style="margin-right:5px">
               <use xlink:href="#icon-liebiaoye-VIPjiaobiao"></use>
            </svg>  
          vip充值
          </el-dropdown-item>
        <el-dropdown-item command="c" style="border-top:2px solid white">
          <svg class="icon" aria-hidden="true" style="margin-right:5px">
               <use xlink:href="#icon-zhanghaozhongxinzhanghaoguanli"></use>
            </svg> 
          账号信息
          </el-dropdown-item>
        <el-dropdown-item command="c" style="border-top:2px solid white">
          <svg class="icon" aria-hidden="true" style="margin-right:5px">
               <use xlink:href="#icon-xiangmuguanli"></use>
            </svg>
          项目管理
          </el-dropdown-item>
        <el-dropdown-item command="e" divided style="display:flex;align-items:center;justify-content:center;padding:0;margin:0;border-top:1.21px solid white"> <i @click="quit" style="cursor:pointer;">
          <el-icon size="20"><SwitchButton /></el-icon>
          </i></el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
      </el-col>
  </el-row>
</template>
<script setup>
import useMenu from "../../store/menu.js";
import useUser from "../../store/user.js";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import {CaretBottom} from "@element-plus/icons-vue"
import {Fold,Expand} from "@element-plus/icons-vue"
import { ref } from "vue";
let user = useUser();
let menu = useMenu();
let router = useRouter();
let flag = ref(true)
let isflag = ref(false)
let changeMenu = () => {
  flag.value = !flag.value;
  isflag.value = !isflag.value;
  menu.isCollapse = !menu.isCollapse;
};


// let use = JSON.parse(localStorage.getItem("users"))
// console.log(use);
// let {nickname,headimgurl,roleName} = use.userInfo.value
let {nickname,headimgurl,roleName} = user.$state.userInfo.value

let quit = ()=>{
  sessionStorage.removeItem("token")
  router.push("/login")
  window.location.reload()
}

let handleCommand = () =>{

}
</script>
<style scoped>
.el-col-6 {
  /* background: skyblue; */
  display: flex;
  align-items: center;
  width: 30%;
  font-weight: 1000;
  font-size: 20px;
}
.row-bg {
  /* padding: 10px 0; */
  /* background-color: skyblue; */
  text-align: center;
  line-height: 50px;
  color: white;

}
.colmenu {
  width: 50px;
  height: 30px;
  border: 0px;
  border-radius: 5px;
  margin-left: 5px;
  cursor: pointer;
}
:deep(.el-dropdown-menu__item){
  color:white !important;
}
</style>
